Component center img #143
Component center img #143
Conversation
…ghout honeycomb docs to use this new component instead
…ghout honeycomb docs to use this new component instead
…oneycomb-docs into component-center-img
…ghout honeycomb docs to use this new component instead
…oneycomb-docs into component-center-img
…ghout honeycomb docs to use this new component instead
…oneycomb-docs into component-center-img
|
Visit the preview URL for this PR (updated for commit 834e37b): https://ccv-honeycomb-docs--pr143-component-center-img-01ozszps.web.app (expires Thu, 18 Jul 2024 15:08:18 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: d403a110fede5b0308678a87537bf61d0597aef6 |
docs/assets/center_img.jsx
Outdated
| let imgStyleString; | ||
| if (props.imgStyle != undefined && Object.keys(props.imgStyle).length === 0) { | ||
| imgStyleString = {}; | ||
| } else { | ||
| imgStyleString = props.imgStyle; | ||
| } |
There was a problem hiding this comment.
A great way of doing prop delegation is by using the spread operator
There was a problem hiding this comment.
I see! This looks really nice and makes more sense to keep things clean. I tried to modify the current CenteredImage component to use this! Thank you!
docs/assets/center_img.jsx
Outdated
| * @returns a component for uniformally centering images in the doc | ||
| */ | ||
|
|
||
| export default function CenterImg(props) { |
There was a problem hiding this comment.
This is an example of how you could set up the component with prop delegation
| export default function CenterImg(props) { | |
| export default function CenterImg({src, alt, ...delegated}) { |
docs/assets/center_img.jsx
Outdated
| * imgStyle: object, any image styles (props can be passed in as: `imgStyle={{ maxHeight: "600px", border: "solid" }}`) | ||
| * @returns a component for uniformally centering images in the doc | ||
| */ | ||
|
|
There was a problem hiding this comment.
There's an extra empty line here
docs/assets/center_img.jsx
Outdated
There was a problem hiding this comment.
A couple semantic things here
- I would call this component
CenteredImageas component are things ("A centered image") and not an action ("a function that centers an image") - hope that makes sense! - After this could you rename the file itself to be
CenteredImage.jsx? Different companies may have different naming conventions but it's generally best to give the file the same exact name as the component
There was a problem hiding this comment.
I see! This makes so much sense; thank you so much :) ! Just went in and refactored the semantics.
docs/assets/CenteredImage.jsx
Outdated
| return ( | ||
| <div style={{ textAlign: "center" }}> | ||
| <img src={src} alt={alt} style={imgStyleString} /> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
If you destructure the delegated prop object into the image it will handle all of the style props for you!
| return ( | |
| <div style={{ textAlign: "center" }}> | |
| <img src={src} alt={alt} style={imgStyleString} /> | |
| </div> | |
| ); | |
| return ( | |
| <div style={{ textAlign: "center" }}> | |
| <img src={src} alt={alt} {...delegated} /> | |
| </div> | |
| ); |
There was a problem hiding this comment.
This means you can delete lines 13-21
There was a problem hiding this comment.
So sorry but I'm gonna be super annoying 🫣
Can you move the CenteredImage.jsx file from docs/assets/ to /components/? You'll have to create the components folder. From there you can import it as :
import CenteredImage from '@site/components/CenteredImage';So sorry I didn't catch this sooner!
docs/assets/center_img.jsx: Create new component<CenterImg />that follows JSX original issuesuggested (passed in as props) with additional prop item
imgStylespecifying any style attributes (such as height) the image should take/docs: those that contain image tags (originally<img />) are changed to<CenterImg />for uniformed centering image component